<!-- 展示 》 状态 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="className">
      <span :class="textClass" :style="textStyle">
        <slot :text="trans(model)">{{ trans(model) }}</slot>
      </span>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import FormStatus from '../../form/FormStatus'

const name = 'ShowStatus'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 状态字典
     */
    STATUS: FormStatus.computed.STATUS,

    /**
     * 展示文本
     */
    showText() {
      const { model, STATUS, empty } = this
      return CORE.dict(STATUS, model) || empty
    },

    /**
     * 颜色数据
     */
    colorData() {
      const { model, STATUS, colorIndex } = this

      // 是否有颜色
      const matched = STATUS.find((status) => status[0] === model) || []
      const color = matched[colorIndex]
      if (!color) return null

      // 颜色是否有效
      const colorData = CORE.DICT.COLOR.find(([, en]) => color === en)
      if (!colorData) return null

      return colorData
    },

    /**
     * 文本样式类
     */
    textClass() {
      const { className, colorData } = this
      if (!colorData) return `${className}-text`
      return `${className}-text ${className}-${colorData[1]}`
    },

    /**
     * 文本样式对象
     */
    textStyle() {
      const { colorData, hasColor, hasBorder, hasBackground } = this
      const style = {}
      if (colorData) {
        if (hasColor) style.color = colorData[2]
        if (hasBorder) style.borderColor = colorData[3]
        if (hasBackground) style.backgroundColor = colorData[4]
      }
      return style
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, init, EMPTY, STATUS } = this
      const value = obj[prop]
      const values = STATUS.find(([id]) => value === id)

      // 判断是否存在有效值字典
      if (values) return value !== model
      if (STATUS.length) return true
      return model || value !== (init || EMPTY)
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, STATUS, init, EMPTY } = this
      const value = obj[prop]
      const values = STATUS.find(([id]) => value === id)

      // 判断是否存在有效值字典
      if (values) this.model = value
      else this.model = init || EMPTY
    },

    /**
     * 转换方法
     */
    trans(value) {
      const { STATUS, empty } = this
      return CORE.dict(STATUS, value) || empty
    },
  },
}
</script>
